import React, { Component } from 'react';

/* 
  三种修正this的方式--this绑定到该实例
  1.render函数动态绑定this
  <button onClick={this.handleClick.bind(this)}>+</button>

  2.构造函数中修改this
  constructor(props){
    super(props);
    this.handleClick=this.handleClick.bind(this)
  }

  3.使用箭头函数 实际使用较多一些
  handleClick=()=>{
    this.setState({
      msg:"羊"
    })
  }
*/

class App extends Component {
  constructor(props){
    super(props);
    /* 第二种 */
    // this.handleClick=this.handleClick.bind(this)
  }

  /* 绑定属性 */
  state={
    msg:"牛"
  }

  /* handleClick(){
    //类函数定义this 指向
    console.log(this); //undefined
    this.setState({
      msg:"羊"
    })
  } */

  /* 第三种-箭头函数 */
  handleClick=()=>{
    this.setState({
      msg:"羊"
    })
  }

  render() {
    return (
      <div>
        {/* 第一种 */}
        {/* <button onClick={this.handleClick.bind(this)}>+</button> */}
        <button onClick={this.handleClick}>+</button>
        <h1>{this.state.msg}</h1>
      </div>
    );
  }
}

export default App;
